<template>
    
    <el-tabs v-model="editableTabsValue" type="border-card"  class="demo-tabs" closable @tab-remove="removeTab" @tab-change="tabChange">
    
        <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name"></el-tab-pane>

        <el-scrollbar height="550px">
            <keep-alive :include="$store.includeList">	
                <component :is="changeComp" :paramsID='paramsID' :key="$store.activeIndex"/>  
            </keep-alive>
        </el-scrollbar>
    
    </el-tabs>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
import {useRouter ,useRoute} from 'vue-router'
import { useStore } from 'vuex'
import fourOne from '@/views/four/fourOne.vue'
import fourTwo from '@/views/four/fourTwo.vue'
import Home from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'

import oneTwo from '@/views/one/oneTwo.vue'
import oneThree from '@/views/one/oneThree.vue'
import oneFour from '@/views/one/oneFour.vue'
import oneFive from '@/views/one/oneFive.vue'

import twoOne from '@/views/two/twoOne.vue'
import twoTwo from '@/views/two/twoTwo.vue'
import twoTree from '@/views/two/twoTree.vue'
import twoFour from '@/views/two/twoFour.vue'
import twoFive from '@/views/two/twoFive.vue'
import twoSix from '@/views/two/twoSix.vue'

import threeOne from '@/views/three/threeOne.vue'
import threeTwo from '@/views/three/threeTwo.vue'
import threeThree from '@/views/three/threeThree.vue'

import fiveOne from '@/views/five/fiveOne.vue'
import fiveTwo from '@/views/five/fiveTwo.vue'

import sixOne from '@/views/six/sixOne.vue'
import sixTwo from '@/views/six/sixTwo.vue'
import sixThree from '@/views/six/sixThree.vue'
import sixFour from '@/views/six/sixFour.vue'

import sevenOne from '@/views/seven/sevenOne.vue'
import sevenTwo from '@/views/seven/sevenTwo.vue'
import sevenThree from '@/views/seven/sevenThree.vue'

import temp from '@/views/template/temp.vue'

export default defineComponent({
    name: 'tabs',
    components:{
        temp,
        fourOne,
        fourTwo,
        Home,
        twoOne,
        twoTree,
        twoFour,//表格input
        twoFive,
        twoTwo,
        twoSix,//表格radio
        threeOne,//动态添加数据表格
        threeTwo,//表格CheckBox
        threeThree,//表格CheckBox
        fiveOne,
        fiveTwo,
        sixOne,
        sixTwo,
        sixThree,
        sixFour,
        oneTwo,
        oneFive,
        oneThree,
        oneFour,
        AboutView,
        sevenOne,sevenTwo,sevenThree

    },
    setup() {
        // activated
        const route = useRoute()
        const router = useRouter()
        const store = useStore()
        const changeComp = ref('home')
        const editableTabsValue = ref('home')
        const editableTabs:any = ref([])
        const paramsID = ref(0)
        const removeTab = (targetName: string) => {
            console.log(targetName,'tatata')
            const tabs = editableTabs.value
            let activeName = editableTabsValue.value
            if (activeName === targetName) {
                tabs.forEach((tab:any, index:any) => {
                    if (tab.name === targetName) {
                        const nextTab = tabs[index + 1] || tabs[index - 1]
                        if (nextTab) {
                            console.log(nextTab,'nenewnew')
                            activeName = nextTab.name
                            editableTabsValue.value = nextTab.name
                            store.state.activeIndex = nextTab.path
                            router.push(nextTab.path)
                        }else{
                            router.push('/home')
                            editableTabsValue.value = 'home'
                        }
                    }
                })
            }
            if(editableTabs.value.length>1){
                editableTabs.value = tabs.filter((tab:any)=>tab.name !==targetName)
            }
            if(store.state.includeList.length>1){
                store.state.includeList = store.state.includeList.filter((tab:any)=>tab !==targetName)
            }
            

            store.state.navList=editableTabs.value
            console.log(store.state,'12345667')

        }

        const tabChange = (pane:string)=>{
            console.log(pane,'panepane')
            // changeComp.value = pane
            for(let i in store.state.navList){
                if(pane===store.state.navList[i].name){
                    if(store.state.navList[i].stutas == 0){
                        changeComp.value = pane
                    }else{
                        changeComp.value = pane.substring(0,pane.split('').length-1)
                    }
                    editableTabsValue.value = store.state.navList[i].name
                    store.state.activeIndex = store.state.navList[i].path
                }
            }
            const tab = [...new Set(store.state.includeList)]
            store.state.includeList =tab
            console.log(store.state,'store')
            console.log(editableTabsValue.value,'editableTabsValue.value')
            console.log(changeComp.value,'changeComp.value')
            
            router.push(store.state.activeIndex)
        }
        //获取navbar的数据
        onMounted(()=>{
            editableTabs.value=store.state.navList
        })
        watch(()=>store.state.activeIndex,(newvalue,oldvlue)=>{
            console.log(newvalue,'newvalue')
            editableTabs.value=store.state.navList
            if(newvalue.split('/').length>2){
                editableTabsValue.value = newvalue.split('/')[1]+newvalue.split('/')[2]
                paramsID.value = parseInt(newvalue.split('/')[2]) 
            }else{
                editableTabsValue.value = newvalue.split('/')[1]
                paramsID.value = 0
            }
            
        })
        

        return {
            editableTabsValue,
            editableTabs,
            removeTab,
            changeComp,
            tabChange,
            paramsID
        }


    }
})
</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>

